<template>
	<section>
		 <el-tabs v-model="activeName" @tab-click="handleClick">
		    <el-tab-pane label="部门" name="first">
		    	<tong-ji-form @submitFrom="submitFrom" :activeName="activeName"></tong-ji-form>
		    	<tong-ji-table :areaTime="areaTime"  @gotoPage="gotoPage" :lableData="lableData" :tableData ='tableData' :pageSize="params.pageSize" :pageTotal="params.pageTotal"></tong-ji-table>
		    </el-tab-pane>
		    <el-tab-pane label="人员" name="second">
		    	<tong-ji-form @submitFrom="submitFrom" :activeName="activeName"></tong-ji-form>
		    	<tong-ji-table :areaTime="areaTime"  @gotoPage="gotoPage" :lableData="lableData" :tableData ='tableData' :pageSize="params.pageSize" :pageTotal="params.pageTotal"></tong-ji-table>
		    </el-tab-pane>
		    <el-tab-pane label="案件类型" name="third">
		    	<tong-ji-form @submitFrom="submitFrom" :activeName="activeName"></tong-ji-form>
		    	<tong-ji-table :areaTime="areaTime" :groupBy="groupBy" @gotoPage="gotoPage" :lableData="lableData" :tableData ='tableData' :pageSize="params.pageSize" :pageTotal="params.pageTotal"></tong-ji-table>
		    </el-tab-pane>
		  </el-tabs>
		  <a :href="download()">导出</a>
		
	</section>
</template>

<script>
	import tongJiForm from '../components/tongJiForm'
	import tongJiTable from '../components/tongJiTable'
	import {apiGetListTong,apiDownloadTong,apiGetListStatus,apiDownloadStatus} from '../css_img_js/apiTongJi'
	export default {
		components:{
			tongJiForm,
			tongJiTable
		},
	    data() {
	      return {
	        activeName: 'first',
	        areaTime:'全部时间',/*范围时间*/
	        lableData:{},
	        params:{
	        	groupBy:'org',
	        	yearAndMonthId:'',
	        	orgName:'',
	        	pageNum:1,
	        	pageSize:5,
	        	pageTotal:0,
	        	userName:'',
	        	status:0,/*案件状态*/
	        },
	        groupBy:'status',
	        firstLable:{/*这里写死,部门*/
				        orgName : '部门名称',
				        41 : '案件发起量',
				        2 : '按时受理量',
				        3 : '延迟受理量',
				        12:'按时反馈量',
				        13:'延迟反馈量',
				        22 : '按时分发量',
				        23 : '延迟分发量',
				        42 : '按时办结量',
				        43 : '延时办结量',
			},
			secondLable:{/*人员*/
						orgName : '部门名称',
					    userName : '人员名称',
				        41 : '案件发起量',
				        2 : '按时受理量',
				        3 : '延迟受理量',
				        12:'按时反馈量',
				        13:'延迟反馈量',
				        22 : '按时分发量',
				        23 : '延迟分发量',
				        42 : '按时办结量',
				        43 : '延迟办结量',
			},
			thirdLable:{/*案件类型*/
				        status : '工单状态',
				        applyOrg : '发起部门',
				        applyUser : '工单发起人',
				        caseName : '工单名称',
				        handleOrg : '当前处理部门',
				        handleUser:'当前处理人',
				        timeout : '工单是否延迟',
				        delayTime:'延迟时间'
			},
			tableData:[
			],
	      };
	    },
	    methods: {
	      handleClick(tab, event) {/*改tab*/
	        console.log(tab, event);
	        this.changeLable(tab.name);
	        console.log(this.activeName);
	      },
	      changeLable(val){/*改tab*/
	      	if(val==='first'){
	      		this.lableData = this.firstLable;
	      		this.params.groupBy = 'org'
	      		this.params.yearAndMonthId=''/*重新刷新*/
	      		this.params.orgName=''
	      		this.params.userName=''
	      	}else if(val==='second'){
	      		this.lableData = this.secondLable;
	      		this.params.groupBy = 'user'
	      		this.params.yearAndMonthId='';
	      		this.params.orgName='';
	      		this.params.userName='';
	      	}else if(val==='third'){
	      		this.lableData = this.thirdLable;
	      		this.params.groupBy = 'status'
	      		this.params.yearAndMonthId='';
	      		this.params.orgName='';
	      		this.params.userName='';
	      	}
	      	this.getList();
	      },
	      getList(){/*获取数据*/
	     	if(this.params.groupBy ==='status'){/*案件类型*/
	     		apiGetListStatus(this,this.params);
	     	}else{/*部门和人员*/
	     		apiGetListTong(this,this.params);
	     	}
	      
	      },
	      download(){/*导出功能*/
	     	if(this.params.groupBy === 'status'){
	     		return apiDownloadStatus(this.params);
	     	}else{
	     		return apiDownloadTong(this.params);
	     	}
	      },
	      submitFrom(val){/*查询*/
	      	console.log(val);
	      	if(val.value3!=''&&val.value3!=null){
	      		this.areaTime = val.value3;
	      	}else{
	      		this.areaTime='全部时间'
	      	}
	      	this.params.yearAndMonthId = val.value3
	      	if(this.params.groupBy==='org'){/*搜索部门*/
	      		this.params.orgName = val.branName;
	      	}else if(this.params.groupBy==='user'){/*搜索人*/
	      		this.params.userName = val.peopleName;
	      	}else if (this.params.groupBy==='status'){/*案件状态*/
	      		this.params.status = Number(val.mySelect) ;
	      	}
	      	this.getList();
	      },
	      gotoPage(val){/*跳页*/
	      	this.params.pageNum = val;
	      	this.getList();
	      }
	    },
	    mounted(){
	    	this.changeLable('first');
	    	this.getList();
	    }
  };
</script>

<style scoped="scoped">
	
</style>